$bg: #19212a;
$white: #ffffff;
$black: #000000;
$red: #ea1159;
$blue: #00d6ff;
$green: #2ad078;
$grey: #878b8e;
$grey2: rgba($grey, .5);
.bg-red {
	background-color: $red !important;
}
.bg-blue {
	background-color: $blue !important;
}
.color-red {
	color: $red !important;
}
.color-blue {
	color: $blue !important;
}
.color-white {
	color: $white !important;
}
.box-sizing-border-box {
	box-sizing: border-box;
}
body {
	padding: 0;
	margin: 0;
}
#mainPage {
	min-width: 1920px;
	min-height: 1080px;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0 auto;
	background-image: url('../images/mitsubishi/bg.png');
	background-size: 180px 180px;
	background-color: $bg;
	padding-bottom: 20px;
	* {
		padding: 0;
		margin: 0;
		text-decoration: none;
		list-style: none;
	}
	.main-header {
		width: 100%;
		$height: 70px;
		height: $height;
		text-align: center;
		margin-bottom: 45px;
		span {
			color: $blue;
			font-size: 40px;
			line-height: $height;
		}
	}
	.main-container {
		display: flex;
		justify-content: center;
		.main-col {
			box-sizing: border-box;
			height: 920px;
			&.main-col-1 {
				width: 530px;
				border: 1px solid rgba($blue, .2);
				position: relative;
				.corner {
					position: absolute;
					box-sizing: border-box;
					width: 14px;
					height: 14px;
					$border: 2px solid $blue;
					&.corner-top-left {
						left: -2px;
						top: -2px;
						border-top: $border;
						border-left: $border;
					}
					&.corner-top-right {
						right: -2px;
						top: -2px;
						border-top: $border;
						border-right: $border;
					}
					&.corner-bottom-right {
						right: -2px;
						bottom: -2px;
						border-bottom: $border;
						border-right: $border;
					}
					&.corner-bottom-left {
						left: -2px;
						bottom: -2px;
						border-bottom: $border;
						border-left: $border;
					}
				}
			}
			&.main-col-2 {
				width: 820px;
			}
		}
	}
	.main-col-header {
		$height: 68px;
		height: $height;
		line-height: $height;
		font-size: 32px;
		color: $blue;
		background-color: rgba($blue, .05);
		&>span {
			margin-left: 24px;
		}
	}
	.main-body {
		box-sizing: border-box;
		padding: 0 20px;
	}
	.main-chart {
		width: 100%;
		border-bottom: 1px solid rgba($blue, .2);
		box-sizing: border-box;
		&.no-border-bottom {
			border-bottom: none;
		}
		h3 {
			padding-top: 35px;
			margin: 0 auto 25px;
			font-size: 20px;
			color: $white;
			text-align: center;
			font-weight: normal;
		}
	}
}
#generalPublicSentiment {
	height: 230px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 14px;
	.circle-chart-content {
		width: 50%;
		color: $white;
		span {
			margin-top: 25px;
			display: block;
			text-align: center;
		}
	}
	.circle-chart-box {
		position: relative;
		margin: auto;
		p {
			font-size: 18px;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
		}
	}
}
#personalPublicSentiment {
	height: 280px;
	color: rgba($white, .5);
	.legend-list {
		display: flex;
		justify-content: center;
		margin-bottom: 28px;
		.legend-item {
			$width: 14px;
			display: flex;
			align-items: center;
			margin-right: 48px;
			font-size: $width;
			&>i {
				width: $width;
				height: $width;
				margin-right: 14px;
			}
			&:last-child {
				margin-right: 0;
			}
		}
	}
	.bar-list {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		.bar-item {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 15px;
			.bar-col-1 {
				width: 66px;
				text-align: center;
				font-size: 18px;
			}
			.bar-col-2 {
				flex: 1;
			}
			.bar-col-3 {
				width: 160px;
				text-align: center;
				font-size: 16px;
				.bar-split {
					margin: 0 5px;
				}
			}
			.bar-bg {
				margin: auto;
				width: 95%;
				height: 5px;
				position: relative;
				overflow: hidden;
				background-color: rgba($white, .1);
				.bar {
					width: 0;
					height: 100%;
					position: absolute;
					top: 0;
					left: 0;
				}
			}
		}
	}
}
#mediaPublicSentiment {
	height: 340px;
	color: rgba($white, .5);
	.legend-list {
		display: flex;
		justify-content: center;
		margin-bottom: 28px;
		.legend-item {
			$width: 14px;
			display: flex;
			align-items: center;
			margin-right: 48px;
			font-size: $width;
			&>i {
				width: $width;
				height: $width;
				margin-right: 14px;
			}
			&:last-child {
				margin-right: 0;
			}
		}
	}
	.stack-list {
		width: 100%;
		display: flex;
		justify-content: space-around;
		.stack-item {
			width: 33%;
			text-align: center;
			.stack-value {
				font-size: 16px;
				.stack-split {
					margin: 0 5px;
				}
			}
			.stack {
				height: 100px;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				margin: 10px auto;
				.stack-block {
					width: 40px;
					height: 5px;
					margin-bottom: 5px;
					background-color: rgba($white, .1);
				}
			}
			.stack-label {
				font-size: 18px;
			}
		}
	}
}
#generalKoubei {
	height: 230px;
	font-size: 14px;
	color: $white;
	display: flex;
	align-items: center;
	justify-content: center;
	.analysis-item {
		width: 50%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		.analysis-value {
			color: rgba($white, .5);
			text-align: center;
			margin-bottom: 15px;
			.analysis-bold {
				font-size: 24px;
				color: $white;
			}
			.analysis-split {
				margin: 0 5px;
			}
		}
		.analysis-pic {
			width: 64px;
			height: 64px;
			margin-bottom: 15px;
		}
	}
}
#koubeiMark {
	height: 280px;
	.mark-list {
		width: 100%;
		display: flex;
		justify-content: space-around;
		align-items: center;
		.mark-item {
			color: $white;
			width: 33%;
			$width: 96px;
			$entityWidth: 76px;
			$borderWidth: 20px;
			.mark {
				width: 96px;
				height: 96px;
				position: relative;
				margin: 0 auto 10px;
				.ring {
					position: absolute;
					left: -$borderWidth;
					top: -$borderWidth;
					width: 100%;
					height: 100%;
					border-top: $borderWidth solid $blue;
					border-right: $borderWidth solid $green;
					border-bottom: $borderWidth solid transparent;
					border-left: $borderWidth solid $red;
					border-radius: 50%;
				}
				.pointer {
					position: absolute;
					left: -22px;
					top: 50%;
					width: 70px;
					height: 2px;
					background-color: transparent;
					transform: rotate(-45deg);
					transform-origin: 100% 0;
					&:after {
						content: '';
						display: block;
						position: absolute;
						left: 0;
						top: 0;
						width: 24px;
						height: 100%;
						background-color: $white;
					}
				}
				.ring-svg {
					position: absolute;
					left: -20px;
					top: -20px;
				}
				.mark-entity {
					width: $entityWidth;
					height: $entityWidth;
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
					text-align: center;
					border: 1px solid rgba($white, .1);
					border-radius: 50%;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					.mark-score {
						font-size: 24px;
						line-height: 32px;
					}
					.mark-title {
						font-size: 12px;
						color: rgba($white, .5);
					}
				}
			}
			.mark-label {
				text-align: center;
			}
		}
	}
}
#koubeiScore {
	.radar-list {
		width: 100%;
		display: flex;
		justify-content: space-around;
		align-items: center;
		.radar-item {
			width: 33%;
			color: $white;
			text-align: center;
			.radar {
				width: 170px;
				height: 170px;
				margin-bottom: 10px;
			}
		}
	}
}
#infoList {
	width: 100%;
	height: 100px;
	margin-bottom: 36px;
	display: flex;
	justify-content: space-around;
	.info-item {
		color: $white;
		width: 33%;
		.info-value {
			font-size: 36px;
			font-weight: bold;
			text-align: center;
			margin-bottom: 10px;
		}
		.info-label {
			display: flex;
			justify-content: center;
			align-items: center;
			color: rgba($blue, .8);
			.info-pic {
				width: 32px;
				height: 32px;
				margin-right: 10px;
			}
		}
	}
}
#mapContainer {
	padding: 0 25px;
	box-sizing: border-box;
	h2 {
		font-size: 30px;
		color: $blue;
		display: flex;
		align-items: center;
		font-weight: normal;
		&:before {
			content: '';
			display: block;
			width: 8px;
			height: 32px;
			background-color: $blue;
			margin-right: 10px;
		}
	}
}
.pic-flower {
	background-image: url(../images/mitsubishi/pic-flower.png);
	background-size: 100%;
}
.pic-cup {
	background-image: url(../images/mitsubishi/pic-cup.png);
	background-size: 100%;
}
.pic-car {
	background-image: url(../images/mitsubishi/pic-car.png);
	background-size: 100%;
}
.pic-sound {
	background-image: url(../images/mitsubishi/pic-sound.png);
	background-size: 100%;
}
.pic-user {
	background-image: url(../images/mitsubishi/pic-user.png);
	background-size: 100%;
}